<template>
  <el-dialog v-model="dialogVisible" align-center width="1015px"   :style="{ ...positionStyle, transform: 'scale(0.6)', transformOrigin: 'top left' }" :modal="false" class="scaled-dialog">
    <el-form>
      <ContentWrap>
        <!-- 搜索工作栏 style="height:auto;align-items:stretch;" -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="60px">
          <el-form-item label="存货编码"  prop="code">
            <el-input
v-model="queryParams.code" placeholder="请输入存货编码" clearable
                      @keyup.enter="handleQuery" class="!w-120px"/>
          </el-form-item>
          <el-form-item label="存货名称" prop="name">
            <el-input
v-model="queryParams.name" placeholder="请输入存货名称" clearable
                      @keyup.enter="handleQuery" class="!w-120px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="specModel">
            <el-input
v-model="queryParams.specModel" placeholder="请输入规格型号" clearable
                      @keyup.enter="handleQuery" class="!w-120px"/>
          </el-form-item>
          <el-form-item label="批次管理" prop="isBatch">
            <el-select v-model="queryParams.isBatch" placeholder="请选择批次管理" clearable class="!w-120px">
              <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.WMS_INVENTORY_IS_BATCH)"
                         :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-input
v-model="queryParams.brand" placeholder="请输入品牌" clearable
                      @keyup.enter="handleQuery" class="!w-120px"/>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
                            start-placeholder="开始日期" end-placeholder="结束日期"
                            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <!-- 列表 -->
      <ContentWrap>
        <el-table
v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
                  style="height: calc(80vh - 50px - 50px - 35px - 25px)"
                  @row-click="handleRowClick"
                  >

           
          <el-table-column label="存货编码" align="center" prop="code"  width="120px"/>
          <el-table-column label="存货名称" align="center" prop="name"  width="120px"/>
          <el-table-column label="规格型号" align="center" prop="specModel"  width="120px"/>
          <el-table-column label="存货分类" align="center" prop="classifyName"  width="120px"/>
          <el-table-column label="计量单位" align="center" prop="unitName"  width="120px"/>
          <el-table-column label="批次管理" align="center" prop="isBatch"  width="120px">

            <template #default="scope">
              <dict-tag :type="DICT_TYPE.WMS_INVENTORY_IS_BATCH" :value="scope.row.isBatch" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" align="center" prop="brand"  width="120px"/>
          <el-table-column label="税率" align="center" prop="taxRate"  width="120px">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.WMS_TAX_RATE" :value="scope.row.taxRate" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList"/>
      </ContentWrap>

      <!-- <el-button type="primary" @click="handleSubmit" >提交</el-button> -->
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue';
import { InventoryVO, InventoryApi } from '@/api/wms/inventory';
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'

const selectLoading = ref(false); // 表单的加载中
const inventoryList = ref([] as InventoryVO[]); // 存货列表
const loading = ref(true) // 列表的加载中
const list = ref<InventoryVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  name: undefined,
  specModel: undefined,
  classifyId: undefined,
  isBatch: undefined,
  brand: undefined,
  createTime: [],
})
const queryFormRef = ref() // 搜索的表单

interface Props {
  initialData?: { inventoryCode: any; };
}

const props = defineProps<Props>();

const dialogVisible = ref(false);
const formData = ref({
  productionOrdersId: 0,
  inventoryCode: undefined,
  inventoryId: undefined,
  inventoryName: undefined,
  inventoryUnitName: undefined,
  inventorySpecModel: undefined,
  irate: undefined,
  inventoryBrand:undefined,
  quantity:0,
  inQuantity:0,
  sumQty:0,
  price:0,
  itaxprice:0,
  maxQuantity:0,


});

const emit = defineEmits(['success2']);

const position = reactive({
  x: 0,
  y: 0,
});

const positionStyle = computed(() => ({
  left: `${position.x}px`,
  top: `${position.y}px`,
  position: 'absolute',
}));
const open = (event) => {
  position.x = event.clientX;
  position.y = event.clientY;

  dialogVisible.value = true;
  getList();
};

const handleRowClick = (row: InventoryVO) => {
  // 处理点击行的逻辑
  
  // 可以在这里执行进一步的操作，比如将选中的行保存到 formData 中
  formData.value.inventoryId = row.id;
  formData.value.inventoryCode = row.code; 
  formData.value.inventoryName = row.name; 
  formData.value.inventoryUnitName = row.unitName; 
  formData.value.inventorySpecModel = row.specModel; 
  formData.value.irate = row.taxRate; 
  console.log('Clicked row data:', formData.value);

  emit('success2', formData.value);
  dialogVisible.value = false; // 关闭弹窗

};







/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await InventoryApi.getInventoryPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// 暴露 open 方法给父组件
defineExpose({ open });
</script>
<style scoped>
:deep(.el-form-item__label) {
  font-size: 10px !important; /* 设置标签字体大小 */
}

:deep(.el-input__inner) {
  font-size: 10px !important; /* 设置输入框字体大小 */
}
/* stylelint-disable-next-line rule-empty-line-before */
.scaled-dialog {
  transform: scale(0.1) !important; 
  transform-origin: top left !important; /* 设置缩放原点为左上角 */
  /* stylelint-disable-next-line order/properties-order */
  zoom: 0.1 !important; 
}
</style>